<template>
  <div>
    <a-tabs v-model:active-key="curtab" size="mini">
      <a-tab-pane v-for="tab in tabCardList" :key="tab.key" :title="tab.name" />
    </a-tabs>
    <!-- 结算报告 -->
    <SettlementReportList :searchVal="searchVal" :shopList="shopList" :markedtList="markedtList" v-if="curtab === 1" @toSearch="updateSearchVal" @openDetail="openDetail" />
    <!-- 结算明细 -->
    <SettlementReportItems :searchVal="searchVal" :shopList="shopList" :markedtList="markedtList" v-if="curtab === 2" @toSearch="updateSearchVal" />
    <!-- 按运营汇总 -->
    <SummaryReportByUser :searchVal="searchVal" :shopList="shopList" :markedtList="markedtList" v-if="curtab === 3" @toSearch="updateSearchVal" />
    <!-- 汇总核对 -->
    <SummaryCheck v-if="curtab === 4" />
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'SettlementReport',
  })
</script>
<script setup lang="ts">
  import { ref, defineComponent, onMounted } from 'vue'
  import SettlementReportList from './settlementReportList.vue'
  import SettlementReportItems from './settlementReportItems.vue'
  import SummaryReportByUser from './summaryReportByUser.vue'
  import SummaryCheck from './summaryCheck.vue'
  import useBaseDataStore from '@/store/modules/base-data'
  onMounted(() => {
    getMarketList()
    getShopList()
  })
  const curtab = ref(1)
  const searchVal = ref<any>({})
  const useBaseData = useBaseDataStore()
  const markedtList = ref<Array<any>>([])
  const shopList = ref<Array<any>>([])
  const tabCardList = [
    { name: '结算报告', key: 1 },
    { name: '结算报告明细', key: 2 },
    { name: '按运营汇总', key: 3 },
    { name: '汇总核对', key: 4 },
  ]
  function updateSearchVal(info: any) {
    searchVal.value = info
  }
  function openDetail(id: string) {
    searchVal.value.settlement_id = id
    searchVal.value.startDate = null
    searchVal.value.endDate = null
    searchVal.value.dataType = null
    curtab.value = 2
  }
  // 获取站点
  async function getMarketList() {
    await useBaseData.getMarketList()
    markedtList.value = useBaseData.markedtList
  }
  // 获取店铺
  async function getShopList() {
    await useBaseData.getSellersList()
    shopList.value = useBaseData.sellersList
  }
</script>

<style lang="less" scoped>
  :deep(.arco-tabs-nav-tab) {
    background-color: #fff;
  }
</style>
